<#import "layout/layout.ftl" as u>
<@u.layout>
<div class="row tim-row">
    <h2 class="text-center">短链接</h2>
    <legend></legend>
    <div class="col-md-8 col-md-offset-2">
        <p>
            <b>短链接服务</b>

            ${loginInfo!}

            可以帮助你把一个长链接缩短，方便你在社交网络和微博上分享链接，，实现了短链接以及短域名。提供的功能有访问次数限制，访问时间限制以及密码限制，方便您最大限度地掌控您的短链接。我方提供API接入技术支持，详情请联系
            <a href="mailto:" target="_blank">邮箱</a>。
        </p>
        <p>
            <b>您可以体验本系统的部分功能</b> 将您需要转换的长链接输入至下面的输入框，即可生成一个短链接：
        </p>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="form-group label-floating is-empty">
                    <label class="control-label">请输入完整的长链接 eg：https://www.baidu.com</label>
                    <input type="text" class="form-control" id="longUrl">
                    <span class="material-input"></span>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="togglebutton form-group" data-toggle="tooltip" data-placement="top"
                     title="该功能暂未开放">
                    <label>
                        <input type="checkbox" class="disabled" disabled>
                        限制访问次数
                    </label>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="togglebutton form-group" data-toggle="tooltip" data-placement="top"
                     title="该功能暂未开放">
                    <label>
                        <input type="checkbox" class="disabled" disabled>
                        到时失效
                    </label>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="togglebutton form-group" data-toggle="tooltip" data-placement="top"
                     title="该功能暂未开放">
                    <label>
                        <input type="checkbox" class="disabled" disabled>
                        密码访问
                    </label>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group is-empty top0" id="top_view" style="display: none">
                    <label class="control-label">请输入最多访问的次数</label>
                    <input type="number" min="0" class="form-control">
                    <span class="material-input"></span>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group is-empty top0" id="datepicker" style="display: none">
                    <label class="control-label">过期时间</label>
                    <input class="datepicker form-control" type="text"/>
                    <span class="material-input"></span>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group is-empty top0" id="password" style="display: none">
                    <label class="control-label">请输入密码</label>
                    <input type="text" class="form-control">
                    <span class="material-input"></span>
                </div>
            </div>
            <div class="col-sm-12 text-center">
                <div class="form-group is-empty">
                    <button class="btn btn-info" onclick="createShortUrl()">生成短链接</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row tim-row" id="result" style="display: none">
    <h2 class="text-center">Result</h2>
    <legend></legend>
    <div class="col-md-8 col-md-offset-2">
        <div class="section section-notifications" id="notifications">
            <div class="alert alert-success" style="display:none;" id="success-alert">
                <div class="container-fluid">
                    <div class="alert-icon">
                        <i class="material-icons">check</i>
                    </div>
                    <b>成功:</b> 短链接生成成功！
                    <p class="short-url-big" id="short-url-big">
                </div>
            </div>
            <div class="alert alert-danger" style="display:none;" id="error-alert">
                <div class="container-fluid">
                    <div class="alert-icon">
                        <i class="material-icons">error_outline</i>
                    </div>
                    <b>出错了:</b> <span id="error-message"></span>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        </p>
    </div>
</div>
<script>
    $().ready(function () {
        var loginInfo = localStorage.getItem("loginInfo");
        if (loginInfo) {
            $("#username").text(JSON.parse(loginInfo).data.username);
            $("#no_login").hide();
            $("#logined").show();
        } else {
            $("#no_login").show();
            $("#logined").hide();
        }
        $(window).on('scroll', materialKit.checkScrollForTransparentNavbar);
        <!-- javascript -->
        $('.datepicker').datepicker({
            weekStart: 1
        });
        <!-- Javascript -->
        $('[data-toggle="tooltip"]').tooltip();

    });

    function createShortUrl() {
        var loginInfo = localStorage.getItem("loginInfo");
        var token = "";
        if (loginInfo) {
            token = JSON.parse(loginInfo).data.token
        }
        $("#short-url-big").hide();
        $("#success-alert").hide();
        $("#error-alert").hide();
        $("#result").hide();
        var longUrl = $("#longUrl").val();
        if (!longUrl) {
            $("#longUrl").focus();
            return;
        }
        var jsonObject = {
            longUrl: longUrl
        }

        var jsonstr = JSON.stringify(jsonObject);
        var settings = {
            type: "POST",
            url: "/api/hcreate",
            data: jsonstr,
            success: function (data, textStatus) {
                if (data.code == 200) {
                    $("#short-url-big").text("r2a.cn/" + data.data.code);
                    $("#result").show();
                    $("#short-url-big").show();
                    $("#success-alert").show();
                    $("html,body").animate({scrollTop: $("#success-alert").offset().top}, 1000);
                } else {
                    $("#error-message").text(data.message);
                    $("#result").show();
                    $("#error-alert").show();
                    $("html,body").animate({scrollTop: $("#error-alert").offset().top}, 1000);
                }
            },
            headers: {
                "Content-Type": "application/json",
                'Authorization': "Bearer " + token
            }
        };
        $.ajax(settings);
    }

    function cleanLS() {
        localStorage.removeItem("loginInfo");
        window.location.href = "/";
    }
</script>
</@u.layout>

